<template>
	<view class="code_login">
		<!-- 这里是状态栏 -->
		<!-- <view class="status_bar" :style="{ height: iStatusBarHeight + 'px'}">
		</view> -->
		<view class="register-container">


			<view class="top_text">
				<view class="small_text">验证码登录</view>
			</view>

			<!-- 表单 -->
			<view class="login-form">
				<!-- 手机 -->
				<view class="input-item-box">
					<view class="input-item">
						<input @input="inputEmail" placeholder-class="myplaceholder" class="login-type-input"
							:class="tipText.email?'red':''" type="text" name="email" v-model.trim="formParams.account"
							placeholder="请输入手机号码" maxlength="30" />

						<image v-show="formParams.account" class="del_icon pass-icon"
							src="../../static/img/login/clear.png" alt="" @tap="formParams.account = ''"></image>
					</view>
				</view>

				<!-- 密码 -->
				<view class="input-item-box">
					<!-- <view class="input-item">

						<input v-if="!showPass" @input="inputPassword" class="login-type-input"
							:class="tipText.password?'red':''" placeholder-class="myplaceholder" type="password"
							v-model="formParams.password" placeholder="请输入密码" maxlength="32" />
						<input v-else @input="inputPassword" class="login-type-input" :class="tipText.password?'red':''"
							placeholder-class="myplaceholder" type="text" v-model="formParams.password"
							placeholder="请输入密码" maxlength="32" />
						<image @tap="showPass=!showPass" v-if="formParams.password && !showPass" class="pass-icon"
							src="../../static/img/login/eye2.png" mode=""></image>
						<image @tap="showPass=!showPass" v-if="formParams.password  && showPass" class="pass-icon"
							src="../../static/img/login/eye.png" mode=""></image>

					</view>
 -->

					<view class="input-item input-item-sms-code">
						<view class="input-wrapper">
							<input type="number" v-model="formParams.account" placeholder="请输入验证码" maxlength="4"
								data-key="mobile" />

							<view class="sms-code-btn" :disabled="smsCodeBtnDisabled" @tap.stop="getSmsCode">
								<text v-if="!smsCodeBtnDisabled">重新获取</text>
								<text v-else class="sms-code-resend">{{
								`重新获取 (${codeSeconds})`
								}}</text>
							</view>
						</view>
					</view>
				</view>

			</view>


			<view class="server-btns flex_right">
				<view class="forget-btn" @tap="forgetPass()">
					忘记密码
				</view>
			</view>

			<view class="login-btn" :class="formParams.account &&formParams.password?'blue':null" @tap="loginBtn()">
				登录
			</view>

			<view class="server-btns">
				<view class="now-register-btn" @tap="toRegisterPage()">
					新用户注册
				</view>
				<view class="forget-btn" @tap="toLoginPage()">
					密码登录
				</view>
			</view>



			<view class="more_login">
				<view class="text">
					<view class="line">

					</view>
					其他登录方式
					<view class="line">

					</view>
				</view>
				<image class="img" @tap="navBack" src="/static/img/login/wx.png"></image>
			</view>

			<view class="readme">
				<view id="mycheckbox"></view>
				<view class="text">我已阅读并同意服务协议及隐私协议</view>
			</view>

		</view>
	</view>
</template>
<script>
	import popupLayer from "@/components/xq-popup-layer.vue";
	import dropdown from '@/components/xq-dropdown.vue';
	import moment from '@/common/moment';
	export default {
		components: {
			dropdown,
			popupLayer
		},
		data() {
			return {
				iStatusBarHeight: 0,
				isDowntime: false,

				language: '',
				showPass: false, //是否显示密码
				passError: 0, //密码错误次数
				sortcate: [], //邮箱下拉列表
				currentSort: 0, //当前邮箱索引
				currentEmail: '', //当前邮箱名称
				priCodeImg: '', //图形码url
				//表单参数
				emailText: '', //邮箱前部分
				formParams: {
					account: "",
					password: ""
				},
				tipText: {
					email: false,
					// code: false,
					password: false,
					priCode: false
				},



				codeSeconds: 0, // 验证码发送时间间隔

				smsCodeBtnDisabled: true, //邮箱验证码 默认禁用

			};
		},
		onBackPress(options) {
			// 这里可以自定义返回逻辑，比如下面跳转其他页面
			// uni.redirectTo({
			// 	url: "/pages/center_home/order/goods_lst?sta=all"
			// })
			// return true 表示禁止默认返回
			return true;
		},
		onLoad(options) {
			var that = this



			// #ifdef H5 

			uni.setStorageSync('uuid', 'ASDSADASDASDASD1241234123')
			// #endif
			// -------------------------------

			this.language = uni.getStorageSync('language');


			//邮箱验证码倒计时
			const time =
				moment().valueOf() / 1000 - uni.getStorageSync('loginSmsCodeTime');
			if (time < 60) {
				this.codeSeconds = 60 - parseInt(time, 10);
				this.handleSmsCodeTime(this.codeSeconds);
			} else {
				//超过60s可重新发送
				this.codeSeconds = 60;
				this.smsCodeBtnDisabled = false;
				uni.removeStorageSync('loginSmsCodeTime');
			}


		},
		onShow() {
			// if (this.$store.state.isplayactive) {

			// 	this.$store.commit('setIsplayactive', false)
			// 	this.$au_player.stop();
			// }
			// var token = uni.getStorageSync('token')

			// if (token) {
			// 	uni.switchTab({
			// 		url: '/pages/index/index'
			// 	})
			// }
		},
		methods: {



			//点击登录
			loginBtn() {
				this.toLogin()

			},
			//跳转注册页
			toRegisterPage() {
				uni.navigateTo({
					url: '/pages/login/register'
				})
			},
			//忘记密码
			forgetPass() {
				uni.navigateTo({
					url: '/pages/login/resetpass'
				})
			},
			toLoginPage() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			blurEmail() {
				var that = this
				//失焦判断非空
				if (!this.emailText) {
					this.tipText.email = true
					this.registerParams.email = ''
					return
				}
				//如果有输入@邮箱后缀
				if (this.emailText && this.emailText.indexOf('@') != -1) {
					//@位置
					var aIndex = this.emailText.indexOf('@')
					//获取输入的邮箱后缀
					var myCurrentEmail = this.emailText.slice(aIndex).toLowerCase()
					//获取输入的邮箱名
					var myEmail = this.emailText.slice(0, aIndex)

					//输入的后缀在列表的索引
					var hasSuffix = -10
					this.sortcate.forEach((item, index) => {
						if (item.text == myCurrentEmail) {
							hasSuffix = index
						}
					})
					//后缀不可用
					if (hasSuffix == -10) {
						uni.showToast({
							title: '不支持该邮箱注册!',
							icon: 'none',
							duration: 2000
						})
						this.emailText = ''
						this.registerParams.email = ''

					} else {
						//后缀可用
						this.emailText = this.emailText.slice(0, aIndex)
						this.currentSort = hasSuffix
						this.currentEmail = that.sortcate[hasSuffix].text
						this.registerParams.email = this.emailText + this.currentEmail


					}
				}
			},

			inputEmail() {
				//如果没有@邮箱后缀，拼接自己的
				if (this.emailText && this.emailText.indexOf('@') == -1) {

					this.registerParams.email = this.emailText + this.currentEmail
					this.tipText.email = false
					// }
				}
				//如果有@邮箱后缀，或为空，失焦再判断
			},

			// inputCode() {
			// 	if (this.registerParams.code == '') {

			// 		this.tipText.code = true
			// 	} else {
			// 		this.tipText.code = false
			// 	}
			// },
			inputPassword() {
				if (this.registerParams.password == '') {

					this.tipText.password = true
				} else {
					this.tipText.password = false
				}
			},
			inputPriCode() {
				if (this.registerParams.priCode == '') {

					this.tipText.priCode = true
				} else {
					this.tipText.priCode = false
				}
			},

			// },
			//同时只展开一个下拉框
			// showCate(item) {

			// 	// console.log(item.cate == 'integral'))

			// },







			//邮箱验证码倒计时---保留
			handleSmsCodeTime(time) {
				let timer = setInterval(() => {
					if (time === 0) {
						clearInterval(timer);
						this.smsCodeBtnDisabled = false;
					} else {
						this.codeSeconds = time;
						this.smsCodeBtnDisabled = true;
						time--;
					}
				}, 1000);
			},

			// 返回上一页
			navBack() {
				this.$mRouter.back();
			},





			// 登录账号
			toLogin() {
				var that = this
				if (this.isDowntime) {

					return
				}
				this.isDowntime = true
				setTimeout(() => {
					that.isDowntime = false
				}, 2000)


				//表单是否填完
				var isChecked = true
				if (!this.emailText) {
					isChecked = false

					this.tipText['email'] = true

				}
				for (var key in this.registerParams) {
					if (!this.registerParams[key]) {
						isChecked = false
						this.tipText[key] = true
					}
				}




				if (isChecked) {
					//验证邮箱格式
					// var reg =/^[a-zA-Z0-9_-]+([a-zA-Z0-9_-]+)+$/

					// var reg=/\W/
					// if(reg.test(this.registerParams.email)){

					// 	uni.showToast({
					// 		title:'邮箱名称含有特殊字符!',
					// 		icon:'none',
					// 		duration:2000
					// 	})
					// 	return
					// }

					//验证密码
					var reg = /\W/
					if (reg.test(this.registerParams.password)) {

						uni.showToast({
							title: '密码含有特殊字符!',
							icon: 'none',
							duration: 2000
						})
						return
					}
					//排除下划线
					if (this.registerParams.password.indexOf('_') != -1) {

						uni.showToast({
							title: '密码含有特殊字符!',
							icon: 'none',
							duration: 2000
						})
						return
					}
					if (this.registerParams.password.length < 6) {

						uni.showToast({
							title: '密码长度过短!',
							icon: 'none',
							duration: 2000
						})
						return
					}
					if (this.registerParams.password.length > 32) {

						uni.showToast({
							title: '密码长度超出限制!',
							icon: 'none',
							duration: 2000
						})
						return
					}

					//邀请码非空判断,前面一验证


					// http
					uni.showLoading({
						title: ''
					})
					var newParams = {}
					newParams.account = this.registerParams.email
					newParams.password = this.registerParams.password
					newParams.captcha = this.registerParams.priCode
					newParams.random = this.registerParams.random
					console.log('newParams', newParams)
					this.$request.login(newParams).then(res => {
						uni.hideLoading()
						if (res.data.code == 1) {
							uni.setStorageSync('userInfo', res.data.data.userinfo)
							uni.setStorageSync('token', res.data.data.userinfo.token)
							uni.setStorageSync('uid', res.data.data.userinfo.id)

							var isHas = false
							var cid = res.data.data.userinfo.id;
							var iddata = res.data.data.ids;

							if (iddata) {



								iddata.forEach(item => {
									if (Number(item) == Number(cid)) {
										isHas = true
									}
								})




								if (isHas) {
									uni.setStorageSync('isImportBar', cid)

								} else {
									var curStatus = uni.getStorageSync('isImportBar')
									if (curStatus) {

										uni.removeStorageSync('isImportBar')

									}
								}

							}


							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 2000
							})
							setTimeout(() => {

								uni.switchTab({
									url: '/pages/index/index'
								})
							}, 500)

						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 2000
							})
							that.registerParams.priCode = ''
						}
					})
				}





			}
		}
	};
</script>
<style lang="scss">
	page {
		height: 100%;
		background-color: #fff;
	}

	.status_bar {
		width: 100%;
	}

	.uni-list {
		text-align: center;
		color: #8c9fad;
		font-size: 28upx;
	}

	#mycheckbox {
		-webkit-appearance: none;
		-moz-appearance: none;
		border: 2px solid #D8D8D8;
		width: 32px;
		height: 32px;
		border-radius: 50%;
		vertical-align: sub;
		float: right;
		position: relative;
	}

	#mycheckbox:checked {
		background-color: #D8D8D8;
	}

	#mycheckbox:checked::after {
		content: '';
		position: absolute;
		left: 3px;
		top: 3px;
		height: 6px;
		width: 10px;
		border: 2px solid #fff;
		border-top: none;
		border-right: none;
		transform: rotate(-45deg);
	}



	.code_login {
		display: flex;
		align-items: center;
		height: 100%;

		.register-container {
			width: 100%;
			position: relative;



			.top_text {
				// margin-top: 132px;
				padding: 140px 64px 108upx;
				box-sizing: border-box;

				.big_text {
					margin-bottom: 8upx;
					font-size: 80upx;
					font-family: PingFang SC-中黑体, PingFang SC;
					font-weight: normal;
					color: #000000;
				}

				.small_text {
					font-size: 40upx;
					font-family: PingFang SC-常规体, PingFang SC;
					font-weight: normal;
					color: #000000;
				}
			}





			.login-form {
				width: 100%;
				padding: 0 64upx;
				box-sizing: border-box;

				.input-item-box {
					.hidden {
						opacity: 0;
					}
				}

				.input-item {
					margin-bottom: 8px;
					display: flex;
					align-items: center;
					height: 100upx;
					// margin-bottom: 20upx;
					border-bottom: 1upx solid rgba(0, 0, 0, .1);

					.left-icon {
						margin: 0 33upx;
						width: 36upx;
						height: 36upx;
					}

					.pass-icon {
						margin: 0 33px;
						width: 32px;
						height: 32px;
					}

					.myplaceholder {
						color: #AAB1C1;
					}

					.login-type-input {
						flex: 1;
						height: 80upx;
						color: #BFBFBF;
						font-size: 28upx;

						&.red {
							color: D64B43;
						}

					}

					.zhankai {
						margin-left: 10upx;
						color: #777D8B;
						font-size: 32upx;
					}

					.emmail-box {
						// padding-left: 20upx;
						// box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: center;
						// margin-right: 16upx;
						width: 208upx;
						height: 100%;

					}

					.sms-code-btn,
					.sms-code-resend {
						margin-right: 33upx;
						width: 208upx;
						text-align: center;
						font-size: $font-base - 2upx;
					}

					.sms-code-btn.pricode-box {
						width: 240upx;
						height: 100%;
						// display: flex;
						align-items: center;

						.pricode-img {
							width: 100%;
						}

						.img-mask {
							position: absolute;
							top: 0;
							width: 100%;
							height: 100%;
							// z-index: 999;
						}
					}
				}

				.input-item-sms-code {
					position: relative;
					width: 100%;

					.sms-code-btn {
						position: absolute;
						height: 90upx;
						line-height: 90upx;
						color: #111;
						right: 0;
						bottom: 0;
						font-size: 28upx;
					}

					.sms-code-resend {
						color: #999;
					}

					.sms-code-btn:after {
						border: none;
						background-color: transparent;
					}
				}


			}



			.mycheckbox-row {
				margin-top: 20upx;
				padding-left: 30upx;
				display: flex;
				align-items: center;

				.iconfont-size {
					margin-left: 30upx;
					font-size: 42upx;
				}

				.color-grey {
					color: #AAB1C1;
				}

				.color-green {
					color: #13a467;
				}

				.checkbox-text {
					margin-bottom: 4upx;

					text {
						color: #13a467;
					}
				}
			}

			.back-btn {
				position: absolute;
				left: 40upx;
				z-index: 9999;
				padding-top: var(--status-bar-height);
				top: 40upx;
				font-size: 48upx;
				color: $color-white;
				width: 50upx;
				height: 34upx;
			}



			//邮箱登录标题
			.email-login {
				font-family: HYQiHei-FZS;
				margin-bottom: 80upx;
				margin-left: 34upx;
				font-size: 60upx;
				font-weight: 500;
				color: #13A467;

				text {
					margin-left: 20upx;
					color: #777d8b;
					font-size: 44upx;
				}

				.desc-login {
					margin-top: 10upx;
					color: #777D8B;
					font-size: 24upx;
					letter-spacing: 2upx;
				}
			}


			.login-btn {
				margin: 78upx auto 40upx;

				width: 622px;
				height: 80px;
				background: #68ACFF;
				border-radius: 8px 8px 8px 8px;
				opacity: 1;
				font-size: 32px;
				font-family: MiSans-Regular, MiSans;
				font-weight: 400;
				text-align: center;
				color: #FFFFFF;
				line-height: 80px;

				&.blue {
					background-color: #177FFF;
				}


			}


			.server-btns {

				width: 100%;
				padding: 0 64upx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28upx;
				font-family: MiSans-Regular, MiSans;
				font-weight: 400;
				color: #595959;

				&.flex_right {
					justify-content: flex-end;
					color: #8C8C8C;
				}
			}

			.more_login {
				// margin-top: 220px;
				margin-top: 160px;
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.text {
					font-size: 28px;
					font-family: PingFang SC-常规体, PingFang SC;
					font-weight: normal;
					color: #8C8C8C;
					// line-height: 36px;
					display: flex;
					align-items: center;

					.line {
						width: 220px;
						height: 2px;
						background-color: #D9D9D9;
					}
				}

				.img {
					margin-top: 24px;
					width: 80px;
					height: 80px;
				}
			}

			.readme {
				margin-top: 20px;
				width: 100%;
				display: flex;
				// flex-direction: row;
				justify-content: center;
				align-items: center;

				.text {
					margin-left: 8px;
					font-size: 24px;
					font-family: MiSans-Regular, MiSans;
					font-weight: 400;
					color: #8C8C8C;
				}


			}
		}


	}
</style>
